"use client";
import { authProviderClient } from "@providers/auth-provider/auth-provider.client";
import { useNavigation, type AuthPageProps } from "@refinedev/core";
import { Button, Card, Form, Input, Typography } from "antd";

const { Title, Text } = Typography;

export const AuthPage = (props: AuthPageProps) => {
  const [form] = Form.useForm();
  const navigate = useNavigation();
  const handleSubmit = (values: any) => {
    authProviderClient.login({
      username: values.username,
      password: values.password,
    }).then((res) => {
      console.log(res);
      if (res.success) {
        navigate.push("/"); // 正确跳转
      }
    }).catch((err) => {
      console.log(err);
    });
  };
  return (
    <div style={{ position: "relative", minHeight: "100vh", overflow: "hidden" }}>
      {/* 动态渐变和模糊光斑背景 */}
      <div style={{
        position: "absolute",
        inset: 0,
        zIndex: 0,
        width: "100%",
        height: "100%",
        background: "linear-gradient(270deg, #e0c3fc, #8ec5fc, #f093fb, #f5576c, #4facfe, #43e97b, #38f9d7, #e0c3fc)",
        backgroundSize: "1600% 1600%",
        animation: "gradientBG 18s ease infinite",
      }} />
      {/* 模糊光斑 */}
      <div style={{
        position: "absolute",
        zIndex: 1,
        top: "10%",
        left: "5%",
        width: 200,
        height: 200,
        background: "#f093fb88",
        filter: "blur(80px)",
        borderRadius: "50%",
        pointerEvents: "none",
      }} />
      <div style={{
        position: "absolute",
        zIndex: 1,
        bottom: "10%",
        right: "10%",
        width: 240,
        height: 180,
        background: "#43e97b88",
        filter: "blur(70px)",
        borderRadius: "50%",
        pointerEvents: "none",
      }} />
      {/* 主体内容 */}
      <div
        style={{
          minHeight: "100vh",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          position: "relative",
          zIndex: 2,
        }}
      >
        {/* LOGO & 欢迎语 */}
        <div style={{ marginBottom: 32, textAlign: "center" }}>
          <img
            src="/assets/logo.png"
            alt="Logo"
            style={{ width: 64, height: 64, marginBottom: 16, borderRadius: 12, boxShadow: "0 2px 8px #0001" }}
          />
          <Title level={2} style={{ marginBottom: 0 }}>欢迎登录管理后台</Title>
          <Text type="secondary">请输入账号和密码</Text>
        </div>
        <Card
          style={{
            width: 380,
            borderRadius: 12,
            boxShadow: "0 4px 24px #0002",
          }}
          bodyStyle={{ padding: 32 }}
        >
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{ username: "", password: "" }}
          >
            <Form.Item
              name="username"
              label={<Text strong>用户名</Text>}
              rules={[{ required: true, message: "请输入用户名" }]}
            >
              <Input size="large" placeholder="请输入用户名" autoComplete="username" />
            </Form.Item>
            <Form.Item
              name="password"
              label={<Text strong>密码</Text>}
              rules={[{ required: true, message: "请输入密码" }]}
            >
              <Input.Password size="large" placeholder="请输入密码" autoComplete="current-password" />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                size="large"
                style={{ width: "100%", fontWeight: 600, letterSpacing: 2 }}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
        {/* 底部版权 */}
        <div style={{ marginTop: 40, color: "#999", fontSize: 14 }}>
          © {new Date().getFullYear()} 管理后台. 保留所有权利.
        </div>
      </div>
      {/* 动态渐变动画 keyframes */}
      <style>{`
        @keyframes gradientBG {
          0% {background-position:0% 50%}
          50% {background-position:100% 50%}
          100% {background-position:0% 50%}
        }
      `}</style>
    </div>
  );
};
